import React, { Component } from 'react'
import PropsTypes from 'prop-types'
import Item from '../Item'
import './index.css'

class List extends Component {
  // 对接收的props进行：类型、必要性的限制
  static propsTypes = {
    todos: PropsTypes.array.isRequired,
    updateTodo: PropsTypes.func.isRequired,
    deleteTodo: PropsTypes.func.isRequired
  }

  render() {
    const { todos, updateTodo, deleteTodo } = this.props
    return (
      <div>
        <ul className="todo-main">
          {todos.map((todo) => {
            return (
              <Item
                key={todo.id}
                {...todo}
                updateTodo={updateTodo}
                deleteTodo={deleteTodo}
              />
            )
          })}
        </ul>
      </div>
    )
  }
}

export default List
